﻿@page "/dialog/multiple-dialogs"

@using Syncfusion.Blazor.Popups

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example demonstrates how to display Multiple Dialogs one over the other. The second Dialog is configured with draggable behavior to adjust its position. You can invoke the second dialog from first dialog's button. Enable the 'Open' button to reopen the dialog if the first dialog is closed.</p>
</SampleDescription>
<ActionDescription>
   <p> You can configure the dialog as a parent and child, and invoke the child dialog from its parent dialog. In addition, multiple dialogs can be shown at a time in a page. The Z- index order will be controlled automatically in the browser and manually using the <code>ZIndex</code> property.</p>
</ActionDescription>

<div class="col-lg-12 control-section" id="target">
    <div>
        @if (this.ShowButton)
        {
            <button id="dialogBtn" class="e-btn" @onclick="@OnClicked">Open</button>
        }
    </div>
    <SfDialog Width="330px" Height="260px" Target="#target" ShowCloseIcon="true" @bind-Visible="FirstVisibility">
        <DialogTemplates>
            <Header> First Dialog </Header>
            <Content>
                <p>This is the first dialog and acts as a parent dialog, you can open the second (child) dialog by clicking 'Next'.</p>
            </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="Next" IsPrimary="true" OnClick="@FirstDlgClick" />
            <DialogEvents OnOpen="DialogOpen" Closed="@DialogClose"></DialogEvents>
        </DialogButtons>
    </SfDialog>

    <SfDialog IsModal="true" Width="285px" Height="215px" Target="#target" ShowCloseIcon="true" @bind-Visible="SecondVisibility">
        <DialogTemplates>
            <Header> Second Dialog</Header>
            <Content>
                <p>This is the second dialog and act as a child dialog.</p>
            </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="Close" IsPrimary="true" OnClick="@SecondDlgClick" />
        </DialogButtons>
    </SfDialog>
</div>

<style>
    #target {
        min-height: 400px;
    }
</style>

@code {
    private bool ShowButton { get; set; } = false;
    private bool Visibility { get; set; } = false;
    private bool FirstVisibility { get; set; } = true;
    private bool SecondVisibility { get; set; } = false;

    private void OnClicked()
    {
        this.FirstVisibility = true; ;
    }

    private void FirstDlgClick()
    {
        this.SecondVisibility = true;
    }

    private void SecondDlgClick(object arg)
    {
        this.SecondVisibility = false;
    }

    private void DialogClose(Object args)
    {
        this.ShowButton = true;
    }

    private void DialogOpen(Object args)
    {
        this.ShowButton = false;
    }
}